<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景遮罩</title>
    <style>
         *{
            margin:0;
            padding:0;
         }

         .div-1{
            background-color:gold;
            width: 300px;
            height: 350px;
            position:fixed;
            top:50%;
            left:50%;
            margin-left:-150px;
            margin-top:-175px;
            z-index:99;
         }

         .div-2{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:black;
            background-color:rgba(0,0,0,0.3);
            /* opacity:0.3; */
         }

    </style>
</head>
<body>
      <div class="div-2">
          <div class="div-1">
               <br>
               <br>
               <br>
               <span>姓名:</span>
               <input type="text">
               <br>
               <br>
               <br>
               <span>年龄:</span>
               <input type="text">
               <br>
               <br>
               <br>
               <span>手机:</span>
               <input type="text">
               <br>
               <br>
               <br>
               <label for="man">男</label>
               <input id="man" type="radio" name="gender">
               <label for="woman">女</label>
               <input id="woman" type="radio" name="gender">
           </div>
       </div>


      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
      <p>我是一个P段落</p>
</body>
</html>